<template>
    <el-drawer
        v-model="isShow"
        direction="rtl"
        :size="config.config.size"
        :close-on-click-modal="false"
        @close="onCloseDialog"
        :append-to-body="true"
        title="分配权限"
    >
        <el-scrollbar>
            <div class="drawer-assage-box">
                <el-tree
                    v-model="dataIds"
                    :data="dataList"
                    node-key="id"
                    show-checkbox
                    :highlight-current="true"
                    :props="{ label: label }"
                    default-expand-all
                    render-after-expand
                    :default-checked-keys="dataIds"
                    @check="onCheckHandler"
                ></el-tree>
            </div>
        </el-scrollbar>
        <template #footer>
            <el-button @click="onCancel">取消</el-button>
            <el-button type="primary" @click="onConfirm">确定</el-button>
        </template>
    </el-drawer>
</template>

<script setup lang="ts">
import { PromiseResponse } from '@/types/type'

interface Props {
    label?: string
    getDataApi: () => PromiseResponse<any>
}
const props = withDefaults(defineProps<Props>(), {
    label: 'title',
})

const emit = defineEmits<{ onTableAction: [action: TableActionType, params: any] }>()

// 是否显示
const isShow = ref(false)
const config = useConfigStore()
// 所有数据
const dataList = ref<any[]>()
// 属主id
const ownerId = ref<number | undefined>()
// 选择的数据的id数组
const dataIds = ref<number[]>()

// 选择的节点发生改变
const onCheckHandler = (obj: any, node: any) => {
    dataIds.value = node.checkedKeys.filter((item: any) => item !== 0)
}

// 打开dialog
const onOpenDialog = async (id: number, ids: number[]) => {
    if (id !== 0) {
        isShow.value = true
        const result = await props.getDataApi()
        if (result.isSuccess) {
            switch (props.label) {
                case 'title':
                    dataList.value = [{ id: 0, title: '全部', children: result.data }]
                    break
                case 'label':
                    dataList.value = [{ id: 0, label: '全部', children: result.data }]
                    break
                case 'name':
                    dataList.value = [{ id: 0, name: '全部', children: result.data }]
                    break
                default:
                    break
            }
        }
        ownerId.value = id
        dataIds.value = ids
    }
}
// 关闭dialog
const onCloseDialog = () => {
    dataList.value = []
    ownerId.value = undefined
    dataIds.value = []
    isShow.value = false
}
// 取消
const onCancel = () => onCloseDialog()
// 完成确认
const onConfirm = async () => {
    if (ownerId.value && dataIds.value && dataList.value && dataIds.value?.length !== 0) {
        const flatArr = getFlatArray(dataList.value)
        flatArr.forEach((item) => {
            if (!item.parentId || item.parentId === 0) {
                return
            }
            if (dataIds.value?.includes(item.id)) {
                const parentArr = getAncestorIds(flatArr, item, false)
                if (parentArr.length !== 0) {
                    dataIds.value.push(...parentArr)
                }
            }
        })
        const serArr = [...new Set(dataIds.value)]
        emit('onTableAction', 'assignPermissionsSubmit', { id: ownerId.value, ids: serArr })
    }
}

defineExpose({
    onOpenDialog,
    onCloseDialog,
})
</script>

<style lang="scss" scoped>
.drawer-assage-box {
    width: 300px;
    margin: 10px 20px;
}
</style>
